<template>
  <view class="all-orders">
    <!-- 订单筛选标签 -->
    <view class="order-filter">
      <view class="filter-scroll">
        <view 
          class="filter-item" 
          :class="{ active: activeFilter === 'all' }"
          @tap="filterOrders('all')"
        >
          全部
        </view>
        <view 
          class="filter-item" 
          :class="{ active: activeFilter === 'pending' }"
          @tap="filterOrders('pending')"
        >
          待支付
        </view>
        <view 
          class="filter-item" 
          :class="{ active: activeFilter === 'processing' }"
          @tap="filterOrders('processing')"
        >
          进行中
        </view>
        <view 
          class="filter-item" 
          :class="{ active: activeFilter === 'completed' }"
          @tap="filterOrders('completed')"
        >
          已完成
        </view>
      </view>
    </view>
    
    <view class="order-card" v-for="(order, index) in filteredOrders" :key="index" @tap="showOrderDetail(order)">
      <view class="order-header">
        <view class="order-number">订单号: {{ order.orderNumber }}</view>
        <view class="order-status" :class="getStatusClass(order.status)">{{ order.status }}</view>
      </view>
      
      <view class="order-content">
        <!-- 垂直排列所有菜品 -->
        <view class="order-dishes-list">
          <view class="order-dish-item" v-for="(dish, dishIndex) in order.dishes" :key="dishIndex">
            <image :src="dish.image" mode="aspectFill" class="dish-image"></image>
            <view class="dish-info">
              <view class="dish-name-count">
                <text class="dish-name">{{ dish.name }}</text>
                <text class="dish-count">x{{ dish.quantity }}</text>
              </view>
              <view class="dish-price">¥{{ dish.price }}</view>
            </view>
          </view>
        </view>
        
        <view class="order-footer">
          <view class="order-time">{{ order.orderTime }}</view>
          <view class="order-price">¥{{ order.totalPrice }}</view>
        </view>
        
        <view class="order-actions">
          <view class="order-remark" v-if="order.remark">
            <text class="remark-label">备注:</text>
            <text class="remark-content">{{ order.remark }}</text>
          </view>
          
          <view class="action-buttons">
            <button v-if="order.status === '已完成'" class="action-btn reorder-btn" @tap.stop="reorder(order)">再来一单</button>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 空状态提示 -->
    <view v-if="filteredOrders.length === 0" class="empty-orders">
      <uni-icons type="list" size="80" color="#CCCCCC"></uni-icons>
      <text class="empty-text">暂无{{ getFilterLabel() }}订单</text>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue';

// 定义订单类型接口
interface Order {
  orderNumber: string;
  status: string;
  dishes: Array<{
    id: string | number;
    name: string;
    image: string;
    price: number;
    quantity: number;
  }>;
  totalPrice: number;
  orderTime: string;
  remark?: string;
  selectedCouponIndex?: number;
}

const props = defineProps({
  orders: {
    type: Array as () => Order[],
    required: true
  }
});

// 当前选中的筛选器
const activeFilter = ref('all');

// 筛选订单
const filterOrders = (filter: string) => {
  activeFilter.value = filter;
};

// 根据筛选条件过滤订单
const filteredOrders = computed(() => {
  if (activeFilter.value === 'all') {
    return props.orders;
  } else if (activeFilter.value === 'pending') {
    return props.orders.filter((order: any) => order.status === '待支付');
  } else if (activeFilter.value === 'processing') {
    return props.orders.filter((order: any) => 
      ['已支付', '已接单', '准备中'].includes(order.status)
    );
  } else if (activeFilter.value === 'completed') {
    return props.orders.filter((order: any) => order.status === '已完成');
  }
  return props.orders;
});

// 获取筛选标签文本
const getFilterLabel = () => {
  switch (activeFilter.value) {
    case 'pending':
      return '待支付';
    case 'processing':
      return '进行中';
    case 'completed':
      return '已完成';
    default:
      return '';
  }
};

// 获取订单状态样式类
const getStatusClass = (status: string) => {
  switch (status) {
    case '待支付':
      return 'status-pending';
    case '已支付':
      return 'status-paid';
    case '已接单':
      return 'status-paid';
    case '准备中':
      return 'status-paid';
    case '已完成':
      return 'status-completed';
    default:
      return '';
  }
};

// 显示订单详情
const showOrderDetail = (order: any) => {
  // 这里需要根据实际情况实现
};

// 再来一单
const reorder = (order: any) => {
  // 这里需要根据实际情况实现
};

// 评价订单
const review = (order: any) => {
  // 这里需要根据实际情况实现
};
</script>

<style lang="scss" scoped>
.all-orders {
  width: 100%;
  box-sizing: border-box;
  min-height: 100vh;
  padding-top: 1px;
}

/* 筛选标签样式 */
.order-filter {
  margin-bottom: 20rpx;
  background-color: #fff;
  border-radius: 12rpx;
  overflow: hidden;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
  position: sticky;
  top: -1px;
  z-index: 10;
}

.filter-scroll {
  display: flex;
  justify-content: space-between;
  padding: 20rpx;
}

.filter-item {
  flex: 1;
  text-align: center;
  padding: 10rpx 0;
  font-size: 28rpx;
  color: #666;
  position: relative;
}

.filter-item.active {
  color: vars.$primary-color;
  font-weight: 500;
}

.filter-item.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 25%;
  width: 50%;
  height: 4rpx;
  background-color: vars.$primary-color;
  border-radius: 2rpx;
}

/* 空状态提示 */
.empty-orders {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 100rpx 0;
}

.empty-text {
  font-size: 28rpx;
  color: #999;
  margin-top: 30rpx;
}

/* 订单卡片样式 */
.order-card {
  background-color: #fff;
  border-radius: 12rpx;
  margin-bottom: 20rpx;
  overflow: hidden;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.order-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx;
  border-bottom: 1px solid #f5f5f5;
}

.order-number {
  font-size: 26rpx;
  color: #666;
}

.order-status {
  font-size: 24rpx;
  padding: 4rpx 12rpx;
  border-radius: 100rpx;
  color: #ffffff;
}

.status-pending {
  background-color: #ff9800; /* 橙色 */
}

.status-paid {
  background-color: #2196f3; /* 蓝色 */
}

.status-completed {
  background-color: #3db87f; /* 绿色 */
}

.status-canceled {
  color: #ffffff;
  background-color: #999999;
}

.order-content {
  padding: 20rpx;
}

.order-dishes-list {
  margin-bottom: 20rpx;
}

.order-dish-item {
  display: flex;
  margin-bottom: 20rpx;
}

.order-dish-item:last-child {
  margin-bottom: 0;
}

.dish-image {
  width: 120rpx;
  height: 120rpx;
  border-radius: 8rpx;
  margin-right: 20rpx;
}

.dish-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.dish-name-count {
  display: flex;
  justify-content: space-between;
}

.dish-name {
  font-size: 28rpx;
  color: #333;
  font-weight: 500;
}

.dish-count {
  font-size: 26rpx;
  color: #999;
}

.dish-price {
  font-size: 28rpx;
  color: #333;
  font-weight: 500;
}

.order-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20rpx;
  padding-top: 20rpx;
  border-top: 1px solid #f5f5f5;
}

.order-time {
  font-size: 24rpx;
  color: #999;
}

.order-price {
  font-size: 32rpx;
  color: #3db87f;
  font-weight: 500;
}

.order-actions {
  margin-top: 20rpx;
  position: relative;
  min-height: 60rpx;
  padding-bottom: 16rpx;
}

.action-buttons {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

.order-remark {
  font-size: 24rpx;
  color: #999;
  margin-bottom: 16rpx;
  padding-right: 140rpx;
  max-width: 60%;
}

.remark-label {
  margin-right: 10rpx;
}

.action-btn {
  margin-left: 16rpx;
  height: 60rpx;
  line-height: 60rpx;
  padding: 0 24rpx;
  font-size: 24rpx;
  border-radius: 30rpx;
}

.reorder-btn {
  background-color: rgba(61, 184, 127, 0.1);
  color: #3db87f;
  border: 1px solid #3db87f;
}
</style> 